import { FC, useEffect, useState } from 'react'
import { Button, Space, Tooltip } from 'antd'
import { DeleteOutlined, EyeInvisibleOutlined, LockOutlined, CopyOutlined, BlockOutlined } from '@ant-design/icons'
import { useDispatch, useSelector } from 'react-redux'
import {
  deleteComponent,
  changeComponentHidden,
  changeComponentLocked,
  ComponentInfoType,
  copyComponent,
  pasteComponent,
} from '@/store/componentsReducer'
import { StateType } from '@/store'
const EditToolbar: FC = () => {
  const dispatch = useDispatch()
  const { selectedId, componentList, copiedComponent } = useSelector((state: StateType) => state.components)
  const [current, setCurrent] = useState<ComponentInfoType>({} as ComponentInfoType)
  useEffect(() => {
    setCurrent(componentList.find(item => item.fe_id === selectedId) || ({} as ComponentInfoType))
  }, [selectedId, componentList])

  // 删除组件
  const handelDel = () => {
    dispatch(deleteComponent())
  }

  // 隐藏组件
  const handelHidden = () => {
    dispatch(changeComponentHidden({}))
  }

  // 锁定组件
  const handelLock = () => {
    dispatch(changeComponentLocked({}))
  }

  // 复制组件
  const handelCopy = () => {
    dispatch(copyComponent())
  }

  // 粘贴组件
  const handelPaste = () => {
    dispatch(pasteComponent())
  }
  return (
    <Space>
      <Tooltip title="删除">
        <Button shape="circle" icon={<DeleteOutlined />} onClick={handelDel} />
      </Tooltip>
      <Tooltip title="隐藏">
        <Button shape="circle" icon={<EyeInvisibleOutlined />} onClick={handelHidden} />
      </Tooltip>
      <Tooltip title="锁定">
        <Button
          shape="circle"
          icon={<LockOutlined />}
          type={current.isLocked ? 'primary' : 'default'}
          onClick={handelLock}
        />
      </Tooltip>
      <Tooltip title="复制">
        <Button shape="circle" icon={<CopyOutlined />} onClick={handelCopy} />
      </Tooltip>
      <Tooltip title="粘贴">
        <Button shape="circle" icon={<BlockOutlined />} disabled={!copiedComponent} onClick={handelPaste} />
      </Tooltip>
    </Space>
  )
}
export default EditToolbar
